<script setup name="playlist">
import { ref, reactive, computed, onMounted } from 'vue'
import { hotCatlist, playList } from '@/services/home'
import { formartNum } from '@/utils/util'
import { PlayOne } from '@icon-park/vue-next'
import IconPark from '@/components/common/IconPark.vue'

const playlistInfo = reactive({
  loading: false,
  tags: [],
  total: 0,
  page: 0
})

const active = ref('华语')
const list = ref([])
const loading = ref(false)
const finished = ref(false)

const loadData = async () => {
  playlistInfo.loading = true
  const { tags } = await hotCatlist()
  playlistInfo.tags = tags
  playlistInfo.loading = false
  onLoad()
}

const onLoad = async () => {
  loading.value = true
  finished.value = false
  const res = await playList({ cat: active.value, limit: 18, offset: list.value.length })
  list.value.push(...res.playlists)
  loading.value = false
  if (!res.more || res.playlists.length === 0) finished.value = true
}

const handleTabsChange = async () => {
  list.value = []
  finished.value = false
  await onLoad()
}

// 处理数据
const formattedPlaylist = computed(() => {
  const formatted = []
  const playlist = list.value
  const length = playlist.length
  for (let i = 0; i < length; i += 3) {
    formatted.push(playlist.slice(i, i + 3))
  }
  return formatted
})
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="playlist">
    <van-sticky :offset-top="0">
      <van-nav-bar class="playlist-header" title="歌单广场" left-arrow @click-left="$router.back()" />
    </van-sticky>
    <van-tabs v-model:active="active" swipeable line-width="20px" color="red" @change="handleTabsChange">
      <van-tab v-for="item in playlistInfo.tags" :key="item.id" :title="item.name" :name="item.name">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-row gutter="24" v-for="(row, rowIndex) in formattedPlaylist" :key="rowIndex">
            <van-col span="8" v-for="(item, colIndex) in row" :key="colIndex" class="playlist-cover">
              <RouterLink :to="{ path: '/playlist', query: { id: item.id } }">
                <van-image radius="10" :src="item.coverImgUrl" :lazy-load="true" show-loading />
                <span class="playlist-cover-playCount">
                  <IconPark :icon="PlayOne" theme="filled" :size="3" />
                  {{ formartNum(item.playCount) }}
                </span>
                <van-text-ellipsis :content="item.name" rows="2" />
              </RouterLink>
            </van-col>
          </van-row>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.playlist {
  .van-nav-bar {
    background-color: var(--color-background);

    &::after {
      content: none;
    }

    :deep(.van-icon) {
      color: var(--reversal-text);
    }
  }

  &-cover {
    padding: 0 !important;
    padding: 8px 6px !important;
    position: relative;

    .van-text-ellipsis {
      font-size: 10px;
    }

    &-playCount {
      display: inline-block;
      height: 12px;
      line-height: 10px;
      border-radius: 10%;
      background-color: #cccccc6b;
      color: #fff;
      font-size: 10px;
      position: absolute;
      top: 12px;
      right: 12px;
    }
  }

  :deep(.van-nav-bar__title) {
    color: var(--reversal-text);
  }

  :deep(.van-tabs__nav--line) {
    background-color: var(--color-background);
  }

  :deep(.van-tab--active) {
    color: var(--reversal-text);
  }

  :deep(.van-tabs__wrap) {
    position: sticky;
    top: 45px;
    z-index: 1;
  }

  :deep(.van-tabs__line) {
    bottom: 6vw;
  }
}
</style>